<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <style>
        .register-container {
            width: 400px;
            margin: 10px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #218838;
        }

        .error-message {
            color: red;
            margin-bottom: 10px;
        }

        .success-message {
            color: green;
            margin-bottom: 10px;
        }

        /* 新增切换按钮样式 */
        .tab-buttons {
            display: flex;
            width: 100%;
            /*margin-bottom: 20px;*/
        }

        .tab-button {
            padding: 10px 20px;
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;

            flex: 1 0 50%; /* 平分宽度 */
            text-align: center;
            padding: 10px 0; /* 保持垂直居中 */
            box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
            box-sizing: border-box;
        }

        .tab-button.active {
            background-color: #0d6efd;
            color: white;
            border-bottom: none;
        }

        .tab-content {
            padding: 20px;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 5px 5px;
        }

        .form-group {
            margin-bottom: 15px;
            margin-top: 20px;
        }

        .form-group-info {
            display: flex;

        }

        .form-group-bnt {
            display: flex;
            justify-content: center;
            margin-top: 25px;
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
        }

        .form-group input {
            width: 90%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="register-container">
    <h2 style="text-align: center;">用户注册</h2>

    <!-- 显示错误消息 -->
    <% if (request.getAttribute("error") != null) { %>
    <div class="error-message">${error}</div>
    <% } %>

    <!-- 显示成功消息 -->
    <% if (request.getAttribute("message") != null) { %>
    <div class="success-message">${message}</div>
    <% } %>

    <!-- 切换按钮区域 -->
    <%--    <div class="tab-buttons">--%>
    <%--        <span class="tab-button active" data-tab="phone">手机注册</span>--%>
    <%--        <span class="tab-button" data-tab="email">邮箱注册</span>--%>
    <%--    </div>--%>
    <%--    <div id="phone-form" class="tab-content" style="display: none;">--%>
    <form action="${pageContext.request.contextPath}/user/register" method="post">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名包含字母和数字，不能以数字开头，6-10位" value="${requestScope.user.username}" required>
        </div>

        <input type="hidden" name="registerType" value="phone"/>
        <div class="form-group">
            <label for="phone">手机号：</label>
            <input type="text" id="phone" name="phone" value="${requestScope.user.phone}" required>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="密码包含字母和数字，并且必须以大写字母开头的6-10位" required>
        </div>

        <div class="form-group">
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
        </div>
        <div class="form-group">
            <div class="form-group-info">
                <label for="code">验证码:</label>
                <img id="captchaImg" src="${pageContext.request.contextPath}/user/captcha" alt="验证码"/>
                <a href="#" onclick="refreshCaptcha()">换一张</a>
            </div>
            <input type="text" id="code" name="code" placeholder="请输入验证码信息" required>
        </div>

        <button type="submit" class="btn">注册</button>
    </form>
    <%--    </div>--%>
    <%--    <div id="email-form" class="tab-content" style="display: none;">--%>
    <%--        <form action="${pageContext.request.contextPath}/user/register" method="post">--%>
    <%--            <div class="form-group">--%>
    <%--                <label for="username-email">用户名：</label>--%>
    <%--                <input type="text" id="username-email" name="username" value="${requestScope.user.username}" required>--%>
    <%--            </div>--%>

    <%--            <input type="hidden" name="registerType" value="email" />--%>
    <%--            <div class="form-group">--%>
    <%--                <label for="email">QQ邮箱：</label>--%>
    <%--                <input type="text" id="email" name="email" value="${requestScope.user.phone}" required>--%>
    <%--            </div>--%>
    <%--            <div class="form-group">--%>
    <%--                <label for="code-email">验证码：</label>--%>
    <%--                <input type="text" id="code-email" name="code" placeholder="请输入验证码信息" required>--%>
    <%--            </div>--%>

    <%--            <div class="form-group">--%>
    <%--                <label for="password-email">密码：</label>--%>
    <%--                <input type="password" id="password-email" name="password" required>--%>
    <%--            </div>--%>

    <%--            <div class="form-group">--%>
    <%--                <label for="confirmPassword-email">确认密码：</label>--%>
    <%--                <input type="password" id="confirmPassword-email" name="confirmPassword" required>--%>
    <%--            </div>--%>

    <%--            <button type="submit" class="btn">注册</button>--%>
    <%--        </form>--%>
    <%--    </div>--%>

    <div style="margin-top: 15px; text-align: center;">
        <a href="${pageContext.request.contextPath}/user/login">已有账号？立即登录</a>
    </div>
</div>
<script>
    function refreshCaptcha() {
        var captchaImg = document.getElementById('captchaImg');
        captchaImg.src = '${pageContext.request.contextPath}/user/captcha?' + new Date().getTime();
    }

    <%--document.querySelectorAll('.tab-button').forEach(button => {--%>
    <%--    button.addEventListener('click', function () {--%>
    <%--        const tab = this.dataset.tab;--%>
    <%--        document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));--%>
    <%--        this.classList.add('active');--%>
    <%--        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');--%>
    <%--        document.getElementById(`${tab}-form`).style.display = 'block';--%>
    <%--    });--%>
    <%--});--%>

    <%--// 模拟发送验证码（需替换为实际接口）--%>
    <%--function sendSmsCode() {--%>
    <%--    alert('验证码已发送，请注意查收！');--%>
    <%--}--%>
    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('.tab-button');
        const contents = document.querySelectorAll('.tab-content');

        // 从 JSP 获取后端传来的 registerType
        const registerType = "${registerType}";
        console.log("registerType:", registerType)

        // // 封装切换逻辑为函数，避免重复代码
        // function switchTab(tab) {
        //     // 更新按钮高亮状态
        //     buttons.forEach(b => b.classList.remove('active'));
        //     const activeButton = document.querySelector('.tab-button[data-tab="' + tab + '"]');
        //     if (activeButton) activeButton.classList.add('active');
        //
        //     // 显示对应表单
        //     contents.forEach(content => content.style.display = 'none');
        //     const form = document.getElementById(tab+"-form");
        //     if (form) form.style.display = 'block';
        // }

        // 绑定点击事件
        // buttons.forEach(button => {
        //     button.addEventListener('click', function () {
        //         const tab = this.dataset.tab;
        //         switchTab(tab);
        //     });
        // });

        // 初始化：优先使用 registerType，否则使用 .active 按钮
        // if (registerType) {
        //     switchTab(registerType); // 使用后端传来的登录类型
        // } else {
        //     // 默认激活第一个 tab
        //     const defaultTab = document.querySelector('.tab-button.active')?.dataset.tab;
        //     if (defaultTab) switchTab(defaultTab);
        // }
    });
</script>
</body>
</html>